import React, { useState, useEffect } from "react";
import { Route, Link, Routes } from "react-router-dom";
function Index() {
  useEffect(() => {
    console.log(`useEffect=>老弟你来了!Index 页面`);
    return () => {
      console.log("老弟你走了! Index页面!");
    };
  }, []);
  return <h2>fatejian 首页</h2>;
}
function List() {
  useEffect(() => {
    console.log(`useEffect=>老弟你来了! List 页面`);
  });
  return <h2>List Page</h2>;
}
function Example() {
  const [count, setCount] = useState(0); // 数组解构赋值
  useEffect(() => {
    console.log(`useEffect=>You clicked ${count} times`);
    return () => {
      console.log("========================");
    };
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click me
      </button>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/list/">列表</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" element={<Index />} />
        <Route path="/list" element={<List />} />
      </Routes>
    </div>
  );
}

export default Example;
